import React from 'react';
import { Result, Button, Card } from 'antd';
import { useNavigate } from 'react-router-dom';
import type { ResultStatusType } from 'antd/es/result';
import './style.less';

export interface ResultPageAction {
  text: string;
  type?: 'primary' | 'default' | 'link';
  onClick?: () => void;
}

export interface ResultPageProps {
  status?: ResultStatusType;
  title: string;
  subTitle?: string;
  extra?: React.ReactNode;
  actions?: ResultPageAction[];
  showBackHome?: boolean;
  backPath?: string;
  className?: string;
  style?: React.CSSProperties;
}

const ResultPage: React.FC<ResultPageProps> = ({
  status = 'info',
  title,
  subTitle,
  extra,
  actions = [],
  showBackHome = true,
  backPath = '/',
  className = '',
  style,
}) => {
  const navigate = useNavigate();

  // 处理返回首页
  const handleBackHome = () => {
    navigate(backPath);
  };

  // 渲染操作按钮
  const renderActions = () => {
    const buttons = [...actions];
    
    if (showBackHome) {
      buttons.push({
        text: '返回首页',
        type: 'primary',
        onClick: handleBackHome,
      });
    }

    if (buttons.length === 0) {
      return null;
    }

    return buttons.map((action, index) => (
      <Button
        key={index}
        type={action.type || 'default'}
        onClick={action.onClick}
      >
        {action.text}
      </Button>
    ));
  };

  return (
    <Card bordered={false} className={`result-page ${className}`} style={style}>
      <Result
        status={status}
        title={title}
        subTitle={subTitle}
        extra={extra || renderActions()}
      />
    </Card>
  );
};

// 预设结果页面
export const SuccessResult: React.FC<Omit<ResultPageProps, 'status'>> = (props) => (
  <ResultPage status="success" {...props} />
);

export const ErrorResult: React.FC<Omit<ResultPageProps, 'status'>> = (props) => (
  <ResultPage status="error" {...props} />
);

export const WarningResult: React.FC<Omit<ResultPageProps, 'status'>> = (props) => (
  <ResultPage status="warning" {...props} />
);

export const Info403Result: React.FC<Omit<ResultPageProps, 'status' | 'title'>> = (props) => (
  <ResultPage
    status="403"
    title="403"
    subTitle="抱歉，您无权访问此页面"
    {...props}
  />
);

export const Info404Result: React.FC<Omit<ResultPageProps, 'status' | 'title'>> = (props) => (
  <ResultPage
    status="404"
    title="404"
    subTitle="抱歉，您访问的页面不存在"
    {...props}
  />
);

export const Info500Result: React.FC<Omit<ResultPageProps, 'status' | 'title'>> = (props) => (
  <ResultPage
    status="500"
    title="500"
    subTitle="抱歉，服务器出错了"
    {...props}
  />
);

export default ResultPage;